<template>
  <el-container class="default"  :class="dataSource.isCollapse?'close':'open'">
    <el-header>
      <div class="level">
        <div class="imi-logo">
          <span v-if="dataSource.isCollapse">蓝色经典</span>
          <span v-else>蓝色</span>
        </div>
        <div class="level">
          <div class="left">
            <el-button class="ml10" type="primary" :icon="dataSource.isCollapse ?'el-icon-s-fold':'el-icon-s-unfold'" size="small" @click="onCollapse"></el-button>
          </div>
          <div class="right">
            <el-breadcrumb separator="/">
              <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
              <el-breadcrumb-item><a href="/">活动管理</a></el-breadcrumb-item>
              <el-breadcrumb-item>活动列表</el-breadcrumb-item>
              <el-breadcrumb-item>活动详情</el-breadcrumb-item>
            </el-breadcrumb>
          </div>
        </div>
        <div class="right">11111</div>
      </div>

    </el-header>
    <el-container>
      <el-aside width="200px" class="imi-menu">
        <el-menu
            :collapse="!dataSource.isCollapse"
            default-active="2"
            background-color="#304156"
            text-color="#fff"
            active-text-color="#ffd04b">
          <template #title>
            <i class="el-icon-location"></i>
            <span>导航一</span>
          </template>
          <el-submenu index="1-4">
            <template #title>
              <i class="el-icon-bank-card"></i>
              <span>系统管理</span>
            </template>
            <el-menu-item index="1-4-1">用户管理</el-menu-item>
            <el-menu-item index="1-4-2">机构管理</el-menu-item>
          </el-submenu>
          <el-submenu index="1-5">
            <template #title>
              <i class="el-icon-trophy"></i>
              <span>计划管理</span>
            </template>
            <el-menu-item index="1-5-1">生产计划</el-menu-item>
            <el-menu-item index="1-5-2">销售计划</el-menu-item>
          </el-submenu>
        </el-menu>
      </el-aside>
      <el-container>
        <el-main>
            <router-view/>
        </el-main>
        <el-footer>Footer</el-footer>
      </el-container>
    </el-container>
  </el-container>


</template>

<script lang="ts">
import { defineComponent ,reactive,onMounted} from 'vue'
import {ElButton,ElHeader,ElContainer,ElAside,ElMain,ElFooter,ElMenu,ElSubmenu,ElMenuItemGroup,ElMenuItem,ElBreadcrumb,ElBreadcrumbItem} from 'element-plus'
export default defineComponent({
  name: 'App',
  components: {
    ElButton,
    ElHeader,
    ElContainer,
    ElAside,
    ElMain,
    ElFooter,
    ElMenu,
    ElSubmenu,
    ElMenuItemGroup,
    ElMenuItem,
    ElBreadcrumb,
    ElBreadcrumbItem
  },
  setup(){
    onMounted(() => {

    });
    const  dataSource = reactive({
      isCollapse:true
    })
    const  onCollapse = ()=>{
      dataSource.isCollapse = !dataSource.isCollapse;
    }
    return {
      dataSource,
      onCollapse
    }
  }
})
</script>

<style>
</style>
